<template>
  <div class="specialsubject">
    <div class="Thematicmodule" v-for="(topic,index) in TopicList.data" :key="index">
      <img :src="topic.scene_pic_url" alt="">
      <div class="title">
        <span class="span1">{{topic.title}}</span>
        <span class="span2">{{topic.subtitle}}</span>
        <span class="span3">{{topic.price_info}}</span>
      </div>
    </div>
    <van-pagination v-model="currentPage" :page-count="pagecount" mode="simple" @change="change">
    </van-pagination>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'topic',
  data() {
    return {
      page: 1,
      size: 4,

      currentPage: 1
    }
  },
  computed: {
    ...mapState({
      TopicList: state => state.login.TopicList,
      //共几页
      pagecount: state => state.login.TopicList.totalPages
    })
  },
  mounted() {
    this.getGetTopicList()
  },
  methods: {
    getGetTopicList() {
      this.$store.dispatch('getGetTopicList', { page: this.page, size: this.size })
    },
    //页码值改变时触发
    change() {
      this.page = this.currentPage
      this.$store.dispatch('getGetTopicList', { page: this.page, size: this.size })
      scrollTo(0, 0)
    }
  }
}
</script>

<style lang="less" scoped>
.specialsubject {
  .Thematicmodule {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    .title {
      display: flex;
      justify-content: center;
      flex-direction: column;
      .span1 {
        display: flex;
        justify-content: center;
        font-size: 0.22rem;
        margin-bottom: 0.1rem;
      }
      .span2 {
        display: flex;
        justify-content: center;
        font-size: 0.18rem;
        margin-bottom: 0.1rem;
      }
      .span3 {
        display: flex;
        justify-content: center;
        font-size: 0.14rem;
        color: #880000;
        margin-bottom: 0.07rem;
      }
    }
  }
}
</style>